


Instagram DMs for AO3

by monarch_v



Category: No Fandom
Genre: CSS, Fanwork Research & Reference Guides, HTML, Instagram, Other
Language: English
Status: Completed
Published: 2020-10-12
Updated: 2020-10-12
Packaged: 2021-03-07 16:47:54
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 1,374
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/26970883
Author URL: https://archiveofourown.org/users/monarch_v/pseuds/monarch_v
Summary: How to imitate Instagram DMs on AO3, with light AND dark themes.
Comments: 6
Kudos: 21
Collections: A Guide to Coding and Fanworks, HTML & CSS stuffs





	1. HTML + Examples

**Author's Note:**

  * Inspired by [How to Make iOS Text Messages on AO3](https://archiveofourown.org/works/6434845) by [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), [La_Temperanza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). 



## Light Theme

GC Name  
  
12:00 AM IG Name 1  
Text  
IG Name 2  
The quick brown fox jumps over the lazy dog.  
IG Name 1  
**► Photo**  
**► View Photo**  
**► Play Video**  
Reply  
**► Video**  
**► Photo**  
  
Seen by [IG Name 1], [IG Name 2] + 1

## HTML

**For the HTML, remove all the asterisks. It's just there so it doesn't show up as the workskin element and not the code itself. I can't figure out how to do it without the asterisks like everybody else does... ~~someone please tell me how~~

##### FOR THE HEADER:

<*p class="litebody">  
<*span class="litehr"><*img class="back" src="https://i.imgur.com/3xwuOz1.jpg" /><*img class="icon1" src="ICON 1 URL" /><*img class="icon2" src="ICON 2 URL" />GC Name<*img class="info" src="https://i.imgur.com/bFHDPtn.jpg" /><*/span><*br />  


##### FOR THE TEXTS:

All you need to do is copy-paste these into your chapter box and change the placeholders (in brackets).

\- Timestamp [AM/PM or Military]  
<*span class="timestamp">[TIME]<*/span><*br />

\- IG Name Tag  
<*span class="othername">[IG NAME 1]<*/span><*br />

\- Text  
<*span class="litetext">[TEXT]<*/span><*br />  
<*span class="litereply">[REPLY]<*/span><*br />

\- Disappearing Videos/Photos 

\--Opened Video/Photo Text  
<*span class="liteopentext"><*strong>► Photo<*/strong><*/span><*br />  
<*span class="liteopentext"><*strong>► Video<*/strong><*/span><*br />  
\--Unopened Video/Photo Text  
<*span class="litenewtext"><*strong>► View Photo<*/strong><*/span><*br />  
<*span class="litenewtext"><*strong>► Play Video<*/strong><*/span><*br />

\--Opened Video/Photo Reply  
<*span class="liteopenreply"><*strong>► Photo<*/strong><*/span><*br />  
<*span class="liteopenreply"><*strong>► Video<*/strong><*/span><*br />  
\--Unopened Video/Photo Reply  
<*span class="litenewreply"><*strong>► Photo<*/strong><*/span><*br />  
<*span class="litenewreply"><*strong>► Video<*/strong><*/span><*br />

-Read Receipt  
<*span class="readreceipt">Seen by [IG Name 1], [IG Name 2] + [number]<*/span><*br />

-Text Box  
<*spanclass="litefr"><*img class="textbox" src="https://i.imgur.com/COueEHf.jpeg"><*/span>

## Dark Theme

GC Name  
  
12:00 AM IG Name 1  
Text  
IG Name 2  
The quick brown fox jumps over the lazy dog.  
IG Name 1  
**► Photo**  
**► View Photo**  
**► Play Video**  
Reply  
**► Video**  
**► Photo**  
  
Seen by [IG Name 1], [IG Name 2] + 1

## HTML

**Again, remove all the asterisks. It's the same as the light theme, but all you have to do is to replace 'lite' with 'dark' in your code. I'll include the code anyway. 

##### FOR THE HEADER:

<*p class="darkbody">  
<*span class="darkhr"><*img class="back" src="https://i.imgur.com/QUNwYS2.jpg" /><*img class="icon1" src="ICON 1 URL" /><*img class="icon2" src="ICON 2 URL" />GC Name<*img class="info" src="https://i.imgur.com/Bq7uqvW.jpg" /><*/span><*br />  


##### FOR THE TEXTS:

Same with the light theme; copy-paste this into your chapter box and change the placeholders (in brackets) as needed.

\- Timestamp [AM/PM or Military]  
<*span class="timestamp">[TIME]<*/span><*br />

\- IG Name Tag  
<*span class="othername">[IG NAME 1]<*/span><*br />

\- Text  
<*span class="darktext">[TEXT]<*/span><*br />  
<*span class="darkreply">[REPLY]<*/span><*br />

\- Disappearing Videos/Photos 

\--Opened Video/Photo Text  
<*span class="darkopentext"><*strong>► Photo<*/strong><*/span><*br />  
<*span class="darkopentext"><*strong>► Video<*/strong><*/span><*br />  
\--Unopened Video/Photo Text  
<*span class="darknewtext"><*strong>► View Photo<*/strong><*/span><*br />  
<*span class="darknewtext"><*strong>► Play Video<*/strong><*/span><*br />

\--Opened Video/Photo Reply  
<*span class="darkopenreply"><*strong>► Photo<*/strong><*/span><*br />  
<*span class="darkopenreply"><*strong>► Video<*/strong><*/span><*br />  
\--Unopened Video/Photo Reply  
<*span class="darknewreply"><*strong>► Photo<*/strong><*/span><*br />  
<*span class="darknewreply"><*strong>► Video<*/strong><*/span><*br />

-Read Receipt  
<*span class="readreceipt">Seen by [IG Name 1], [IG Name 2] + [number]<*/span><*br />

-Text Box  
<*spanclass="darkfr"><*img class="textbox" src="https://i.imgur.com/xM3GwUI.jpeg"><*/span>

  


  


##### NOTES:

  * Make sure the pictures you use for icons are already squares, otherwise they will look... not right.
  * If you don't want a group chat and only want the private DMs, just leave out the 'othername' span class and the 'icon1' image class, then you can just change the group chat name to whatever name you want.
  * If you see a mistake or just something confusing, please tell me. I'm new to HTML and CSS so I'm not sure I entirely know what I'm doing.
  * Update 10/14/20: Added the message boxes and updated the CSS to fit. 



  



	2. CSS

# CSS

### For Both Themes

`#workskin .phone {  
max-width: 300px;  
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
display: table;  
margin: auto;  
}`

`#workskin .othername {  
color: #898989;  
font-size: .75em;  
padding-bottom: .6em;  
padding-top: 0;  
margin-left: 1em;  
margin-bottom: -2.5em;  
text-align: left;  
display: table;  
clear: both;  
}`

`#workskin .timestamp {  
min-width: 295px;  
color: #898989;  
font-size: .75em;  
padding-bottom: 1em;  
padding-top: .5em;  
margin-left: -.5em;  
margin-right: -.5em;  
margin-bottom: -.5em;  
text-align: center;  
display: table;  
}`

`#workskin .icon1 {  
width: 25px;  
height: auto;  
float: left;  
margin: -0.1em -0.7em -0.1em 0em;  
border-radius: 50%;  
}`

`#workskin .icon2 {  
width: 25px;  
height: auto;  
float: left;  
margin: -0.1em -0.7em -0.1em 0em;  
border-radius: 50%;  
}`

`#workskin .info {  
width: auto;  
height: 25px;  
float: right;  
margin: -0.1em 0.4em -0.3em -0.5em;  
}`

`#workskin .back {  
width: auto;  
height: 25px;  
float: left;  
margin: -0.2em 0.3em -0.2em .3em;  
}`

`#workskin .readreceipt {  
color: #898989;  
font-size: .65em;  
float: right;  
position: relative;  
clear: both;  
margin: -.5em -0.5em 0.5em 0;  
padding: .1em 1em 0;  
}`

`#workskin .textbox {  
width: 97%;  
float: left;  
margin: 0 0 0 .35em;  
}`

### For Dark Theme

`#workskin .darkhr {  
min-width: 300px;  
background-color: #121212;  
border-bottom: 1px solid #262626;  
color: #f9faf9;  
font-weight: bold;  
padding-bottom: .5em;  
padding-top: .7em;  
margin-left: -.5em;  
margin-right: -.5em;  
margin-bottom: -2em;  
text-align: center;  
display: table;  
}`

`#workskin .darkbody {  
background-color: #000000;  
display: table;  
padding-left: .5em;  
padding-right: .5em;  
}`

`#workskin .darktext {  
float: left;  
border: 1px solid #262626;  
color: #f9faf9;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #000000;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .darkreply {  
float: right;  
border: 1px solid #262626;  
color: #FFFFFF;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #262626;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .darknewreply {  
float: right;  
color: #FFFFFF;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #262626;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .darknewtext {  
float: left;  
border: 1px solid #262626;  
color: #FFFFFF;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: linear-gradient(90deg, rgba(2,149,245,1) 0%, rgba(38,195,245,1) 100%);  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .darkopentext {  
float: left;  
border: 1px solid #262626;  
color: #737373;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #000000;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .darkopenreply {  
float: right;  
border: 1px solid #262626;  
color: #737373;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #262626;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .darkfr {  
min-width: 300px;  
background-color: #000000;  
border-top: 1px solid #000000;  
color: #f9faf9;  
font-weight: bold;  
padding-bottom: 1em;  
padding-top: .1em;  
margin-left: -.5em;  
margin-right: -.5em;  
margin-top: -.5em;  
margin-bottom: -2em;  
text-align: center;  
display: table;  
}`

### For Lite Theme

`#workskin .litehr {  
min-width: 300px;  
background-color: #f9faf9;  
border-bottom: 1px solid #efefef;  
color: #262626;  
font-weight: bold;  
padding-bottom: .5em;  
padding-top: .7em;  
margin-left: -.5em;  
margin-right: -.5em;  
margin-bottom: -2em;  
text-align: center;  
display: table;  
}`

`#workskin .litebody {  
background-color: #fefffe;  
display: table;  
padding-left: .5em;  
padding-right: .5em;  
}`

`#workskin .litetext {  
float: left;  
border: 1px solid #efefef;  
color: #2a2a2a;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #fefffe;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .litereply {  
float: right;  
border: 1px solid #efefef;  
color: #2a2a2a;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #efefef;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .litenewreply {  
float: right;  
color: #2a2a2a;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #efefef;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .litenewtext {  
float: left;  
border: 1px solid #efefef;  
color: #FFFFFF;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: linear-gradient(90deg, rgba(2,149,245,1) 0%, rgba(38,195,245,1) 100%);  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .liteopentext {  
float: left;  
border: 1px solid #efefef;  
color: #737373;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #efefef;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .liteopenreply {  
float: right;  
border: 1px solid #efefef;  
color: #737373;  
margin: 0 0 0.5em;  
border-radius: 1em;  
padding: 0.3em 1em;  
background: #efefef;  
max-width: 75%;  
clear: both;  
position: relative;  
}`

`#workskin .litefr {  
min-width: 300px;  
background-color: #fefffe;  
border-top: 1px solid #fefffe;  
color: #262626;  
font-weight: bold;  
padding-bottom: 1em;  
padding-top: .1em;  
margin-left: -.5em;  
margin-right: -.5em;  
margin-top: -.5em;  
margin-bottom: -2em;  
text-align: center;  
display: table;  
}`


End file.
